<template>
  <div class="container">
    <el-skeleton
        :count="3"
        :loading="List.length===0"
        animated
        class="skeleton"
    >
      <template #template>
        <div style="flex: 1">
          <el-skeleton-item style="height: 240px" variant="image"/>
          <div style="padding: 14px">
            <el-skeleton-item style="width: 50%" variant="h3"/>
            <div
                style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 16px;
                height: 16px;
              "
            >
              <el-skeleton-item style="margin-right: 16px" variant="text"/>
              <el-skeleton-item style="width: 30%" variant="text"/>
            </div>
          </div>
        </div>
      </template>
      <template #default>
        
        <div class="card">
          <el-card v-for="(item,index) in List" :key="index" :style="{height:cardHeight+'px'}" class="card-item"
                   @click="JopPage(item)">
            <slot :index="index" :item="item" name="content"></slot>
          </el-card>
        </div>

        <div class="pagination">
          <el-pagination
              v-if="Pagination"
              v-model:current-page="page"
              v-model:page-size="pageSize"
              :background="true"
              :total="total"
              layout="prev, pager, next, jumper"
              @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </el-skeleton>
  </div>

</template>
<script setup>
import {ref} from 'vue'

const props = defineProps({
  cardHeight: {
    type: Number,
    default: 250
  },
  List: {
    type: Array,
    default: () => []
  },
  Pagination: {
    type: Boolean,
    default: false
  },
  total: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  page: {
    type: Number,
    default: 1
  },
  description: {
    type: String,
    default: "这个人很懒，还没有上传..."
  }

})
let page = ref(props.page)
let pageSize = ref(props.pageSize)

const emit = defineEmits(["changePage", "changeRoute"]);
const handleCurrentChange = (val) => {
  emit("changePage", val);
}
const JopPage = (item) => {
  emit("changeRoute", item.id);
}
</script>
<style lang="scss" scoped>

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 450px);
  padding: 15px;

  .card {
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    animation: profile_in 0.8s;
    margin: 0 auto;

    .card-item {
      width: 100%;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .skeleton {
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 240px));
    gap: 15px;
    margin: 0 auto;
  }

}


:deep(.el-card__body ) {
  padding: 0 !important;
}

@media screen and (max-width: 960px) {
  .card {
    width: 100% !important;
  }
  .skeleton {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
}
</style>